// 蛇头类;
 class Snake{
	 constructor() {
		 this.snake_box = document.querySelector('.Snake_box');
		 this.head = this.snake_box.querySelector('li')
	     this.snake_child = this.snake_box.getElementsByTagName('li');
		 // console.log(this.snake_child);
		 // this.x = this.snake_child[1].offsetLeft;
		 // this.y = this.snake_child[1].offsetTop;
	 }
	 // 获取 X 坐标
	 get X(){
		 return this.head.offsetLeft;
	 }
	 // 获取 Y 坐标
	 get Y(){
	 	 return this.head.offsetTop;
	 }
	 // 设置蛇头 X 的坐标;
	 // 这个X表示 get X, value:表示 get X里面的内容；
	 set X(value){
		 // 当 X 旧值和新值相同 则不在修改;
		if(this.X === value){
			 return
		 }
		 // 当有第二个蛇并且第一个蛇位置和第二个位置同等时 执行以下代码;
		 if(this.snake_child[1] && this.snake_child[1].offsetLeft === value){
		 	// console.log('掉头了')
		 	if(value > this.X){
				// 如果value大于旧值X, 则说明蛇正在向右走 此时让蛇掉头;
		 		value = this.X - 10;
		 	}else{
				// 如果valuex小于旧值X, 则说明蛇正在向右走 此时让蛇掉头;
		 		value = this.X + 10;
		 	}
		 }
		 // 判断合法值 0 ~ 310 之间;
		 if(value < 0 || value > 310){
			 throw new Error('撞墙了');
		 }
		
		
		this. moveSnake();
		this.head.style.left = value + 'px';
		// 检查是否撞到自己;
		this.checkhead()
	 }
	 // 设置蛇头 Y 的坐标;
	 set Y(value){
		 // 当 Y 旧值和新值相同 则不在修改;
		if(this.Y === value){
		 	return
		 }
		 // 当有第二个蛇并且第一个蛇位置和第二个位置同等时 执行以下代码;
		 if(this.snake_child[1] && this.snake_child[1].offsetTop === value){
		 	// console.log('掉头了')
		 	if(value > this.Y){
		 				// 如果value大于旧值X, 则说明蛇正在向右走 此时让蛇掉头;
		 		value = this.Y - 10;
		 	}else{
		 				// 如果valuex小于旧值X, 则说明蛇正在向右走 此时让蛇掉头;
		 		value = this.Y + 10;
		 	}
		 }
		// 超出则结束;
		if(value < 0 || value > 310){
			// alert('撞墙了  over')
		    throw new Error('撞墙了');
		 }
		 this.moveSnake();
	 	 this.head.style.top = value + 'px';
		 // 检查是否撞到自己;
		 this.checkhead()
	 }
	 // 增加蛇身体方法;
	 addSnake(){
		 // let li = `<li><li>`;
		 this.snake_box.insertAdjacentHTML('beforeend',"<li></li>")
	 }
	 // 添加蛇身体移动方法;
	moveSnake(){
		 /* 
			将后面的身体设置到前面身体的位置;
		 */
		for(let i = this.snake_child.length - 1; i > 0; i--){
			// 获取前面所有身体的位置;
			let X = this.snake_child[i - 1].offsetLeft;
			let Y = this.snake_child[i - 1].offsetTop;
			// 将前面身体位置给当前身体位置;
			this.snake_child[i].style.left = X + 'px';
			this.snake_child[i].style.top = Y + 'px';
		}
	 }
	 // 检测蛇是否撞到自己
	checkhead(){
		 // 将所有的蛇重新获取
		 for(let i = 1; i < this.snake_child.length; i++){
			 // 将所有蛇赋给bd;
			 let bd = this.snake_child[i];
			 // 当蛇头X、Y位置 === 蛇身位置时
			 if(this.X === bd.offsetLeft && this.Y === bd.offsetTop){
				 // 报错 游戏结束;
				 throw new Error('哎呀！ 撞到自己了')
				 console.log('over');
			 }
		 }
	 }
 }
 // new Snake();
 export default Snake; 